<template>
  <div style="color: #000">
    <div>日志配置</div>
    <div class="form-title">日志预警设置:</div>

    <div style="padding-left: 40px">
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable" style="width: 190px">
          日志期望保留天数（天）
        </div>
        <div class="flex">
          <a-input-number
            v-model="form.logStoreTime"
            :max="365"
            :min="180"
            style="width: 100px"
          ></a-input-number>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable">当日志存储空间占用率超过：</div>
        <div class="u-flex u-align-center">
          <a-input-number
            v-model="form.logStoreRate"
            :max="100"
            :min="1"
            class="line-30 mv-6"
            style="width: 100px"
          ></a-input-number>
          <span>%时开始报警</span>
        </div>
      </div>
    </div>
    <div class="form-title">日志自动删除配置:</div>
    <div style="padding-left: 40px">
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable">存储空间清除阈值：</div>
        <div class="u-flex u-align-center">
          <a-input-number
            v-model="form.storeClearThreshold"
            :max="100"
            class="line-30 mv-6"
            :min="1"
            style="width: 100px"
          ></a-input-number>
          <span>%</span>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <a-checkbox v-model="form.openAutoDelete"
          >开启日志存储空间超过清除阈值后自动删除日志</a-checkbox
        >
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable" style="width: 80px">安全日志：</div>
        <div class="u-flex u-align-center">
          <span>自动删除</span>
          <a-input-number
            v-model="form.safeLogStoreTime"
            :max="365"
            class="line-30 mv-6"
            :min="180"
            style="width: 100px"
          ></a-input-number>
          <span>天前的日志</span>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable" style="width: 80px">联动日志：</div>
        <div class="u-flex u-align-center">
          <span>自动删除</span>
          <a-input-number
            v-model="form.linkLogStoreTime"
            :max="365"
            class="line-30 mv-6"
            :min="180"
            style="width: 100px"
          ></a-input-number>
          <span>天前的日志</span>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable" style="width: 80px">运维日志：</div>
        <div class="u-flex u-align-center">
          <span>自动删除</span>
          <a-input-number
            class="line-30 mv-6"
            v-model="form.operationLogStoreTime"
            :max="365"
            :min="180"
            style="width: 100px"
          ></a-input-number>
          <span>天前的日志</span>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="line-30 lable" style="width: 80px">操作日志：</div>
        <div class="u-flex u-align-center">
          <span>自动删除</span>
          <a-input-number
            v-model="form.auditLogStoreTime"
            :max="365"
            class="line-30 mv-6"
            :min="180"
            style="width: 100px"
          ></a-input-number>
          <span>天前的日志</span>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px; width: 556px">
        <u-button class="btn-default btn-confirm" @click="confirm">
          确定
        </u-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        logStoreTime: 180,
        logStoreRate: 70,
        storeClearThreshold: 90,
        openAutoDelete: false,
        safeLogStoreTime: 180,
        linkLogStoreTime: 180,
        operationLogStoreTime: 180,
        auditLogStoreTime: 180,
      },
    };
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    getConfig() {},
    confirm() {
      this.$message.success("配置成功");
    },
  },
};
</script>
<style lang="scss" scoped>
.point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
::v-deep .ant-input-number-input {
  text-align: center;
}
.line-30 {
  line-height: 30px;
  height: 30px;
}
.lable {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}

.mv-6 {
  margin: 0 6px;
}

.form-title {
  margin-top: 20px;
  padding-left: 20px;
  position: relative;
  font-size: 20px;
  font-weight: bold;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #6398e5;
  }
}
</style>
